@import "variables";

remark-detail {
  .remark-detail {
    position: relative;
    background-color: #fff;
    padding-bottom: pxTorem(180);
  }
  .seed-gap {
    height: pxTorem(20);
  }
  .lesson-title {
    display: block;
    width: 100%;
    padding: pxTorem(24) pxTorem(30);
    font-size: standard($f, f3);
    color: color($h5, c2);
    background-color: #fff;
  }
  .remark-header {
    padding: pxTorem(40) pxTorem(20) pxTorem(10) pxTorem(28);
    font-size: standard($f, f3);
    color: color($h5, c4);
    background-color: #fff;
    .nick {
      flex: 1;
    }
  }
  .remark-content {
    background-color: #fff;
    .remark-text{
      padding: 0 pxTorem(24);
      margin-bottom: pxTorem(20);
    }
    .textarea-warp{
      padding: 0;
    }

    textarea {
      height: pxTorem(170);
      width: 100%;
      margin-bottom: pxTorem(24);
      padding: 0;
      line-height: pxTorem(46);
      font-size: standard($f, f4);
      color: color($h5, c2);
      resize: none;
      border: none;

      font-family: STHeiti, Microsoft YaHei, Helvetica, Arial, sans-serif;
      &::-webkit-input-placeholder {
        　　color: color($h5, c5);
      }
    }
    .remark-image {
      display: flex;
      flex-wrap: wrap;
      padding: 0 pxTorem(18) pxTorem(10) pxTorem(18);
    }
    .image-item {
      position: relative;
      width: 33%;
      height: pxTorem(226);
      padding: 0 pxTorem(5);
      margin-bottom: pxTorem(10);

      .remove-btn {
        position: absolute;
        top: 0;
        right: pxTorem(5);
        @include icon(26, 26, '#{$icons-path}/remove.png')
      }
      &.add-image {

        .content{
          width: 100%;
          height: 100%;
          flex-direction: column;
          border: 1px dotted #dadada;
          font-size: standard($f, f5);
          color: color($h5, c4);
          background-color: #f0f0f0;
        }
      }
      i {
        margin-bottom: pxTorem(16);
        @include icon(50, 50, '#{$icons-path}/add_image.png')
      }
      input {
        position: absolute;
        top:0;
        left:0;
        right: 0;
        bottom: 0;
        z-index: 9;
        max-width: 100%;
        background-color: royalblue;
        opacity: 0;
      }
    }
    seed-img {
      width: 100%;
      height: 100%;
    }
  }
  .seed-default-graph{
    padding-top: pxTorem(178);
  }
  .seed-scroll-outside {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  .btn-wrap {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: pxTorem(120);
    justify-content: flex-end;
    padding-right: pxTorem(24);
    background-color: #fff;
    button {
      height: pxTorem(64);
      padding: 0 pxTorem(44);
      margin-left: pxTorem(20);
      border: pxTorem(4);
      font-size: standard($f, f5);
      color: color($h5, c2);
      border: 1px solid color($h5, c6);
    }
  }
  footer{
    position: absolute;
    bottom: 0;
    z-index: 11;
    width: 100%;
  }
}
